<template>
  <div class="card-list">
    <div class="card-item" v-for="(item, index) in memoArr" :key="index">
      <div class="up">
        <div class="title">
          <div>{{ item.title }}</div>
          <div class="action-box">
            <span
              style="font-size: 20px; color: #999; margin-right: 15px"
              @click="editHandle(item)"
              ><i class="el-icon-edit"></i>
            </span>

            <span
              style="font-size: 20px"
              @click="deleteHandle(item.id, item.title)"
              ><i class="el-icon-delete"></i
            ></span>
          </div>
        </div>

        <div class="tags">
          <span>分类: {{ getCateName(item.categoryId) }}</span>
        </div>
        <div class="content">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import DateItem from "@/modal/dataItem";

@Component({})
export default class CardList extends Vue {
  // list值 初始值
  memoArr: Array<DateItem> = this.$store.state.dataAction.memoList;
  constructor() {
    super();
  }
  editHandle(item: any) {
    this.$store.state.isModalShow = true;
    this.$store.state.editId = item.id;
    this.$store.commit("showEditMeno", item);
  }

  getCateName(id: number): string {
    return this.$store.state.dataAction.getCategory(id);
  }

  deleteHandle(id: number, title: string): void {
    if (title) {
      console.log("确认删除该条信息");
    }

    this.$store.state.dataAction.removeData(id);
  }
}
</script>

<style lang="less" scoped>
.card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .card-item {
    width: 25%;
    border: 1px solid #eee;
    padding: 15px;
    margin: 10px 0;

    .up {
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
      }
      .action-box {
        span {
          cursor: pointer;
        }
      }
    }
    .tags {
      margin: 10px 0;
      color: #999;
    }
  }
}
</style>